<template>
    <el-container class="wrapper">
        <el-header height="100px" class="banner">毛会DKP管理系统</el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                background-color="#feddb8"
                text-color="#5377f0"
                active-text-color="#e63b3b"
                @select="menuItemSelect"
                >
                    <el-menu-item index="welcome">
                        <i class="el-icon-star-on"></i>
                        <span>首页</span>
                    </el-menu-item>
                    <el-menu-item index="dkpList">
                        <i class="el-icon-edit-outline"></i>
                        <span>DKP查询</span>
                    </el-menu-item>
                    <el-menu-item index="raidList">
                        <i class="el-icon-document"></i>
                        <span slot="title">活动查询</span>
                    </el-menu-item>
                    <el-menu-item index="7">
                        <i class="el-icon-document"></i>
                        <span slot="title">体验服注册</span>
                    </el-menu-item>
                    <el-menu-item index="accountList">
                        <i class="el-icon-document"></i>
                        <span slot="title">体验服账号查看</span>
                    </el-menu-item>
                    <el-menu-item index="backupList" v-if="isLogin && level>1">
                        <i class="el-icon-document"></i>
                        <span slot="title">数据维护</span>
                    </el-menu-item>
                    <el-menu-item index="5" v-if="isLogin">
                        <i class="el-icon-document"></i>
                        <span slot="title">公告维护</span>
                    </el-menu-item>
                    <el-menu-item index="adminList" v-if="level>2">
                        <i class="el-icon-document"></i>
                        <span slot="title">权限管理</span>
                    </el-menu-item>
                    <el-menu-item index="6" v-if="isLogin">
                        <i class="el-icon-document"></i>
                        <span slot="title">修改密码</span>
                    </el-menu-item>
                    <el-menu-item index="help">
                        <i class="el-icon-question"></i>
                        <span slot="title">使用帮助</span>
                    </el-menu-item>
                    <el-menu-item index="3" v-if="!isLogin">
                        <i class="el-icon-document"></i>
                        <span slot="title">登录后台</span>
                    </el-menu-item>
                    <el-menu-item index="4" v-if="isLogin">
                        <i class="el-icon-setting"></i>
                        <span slot="title">退出系统</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main height="">
                <router-view/>
            </el-main>
        </el-container> 

        <el-dialog title="管理员登录" width="500px" :visible.sync="loginShow">
            <el-form :model="loginForm" ref="loginForm" :rules="rules">
                <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
                <el-input v-model="loginForm.username" 
                    clearable 
                    autocomplete="off" 
                    @keypress.enter.native="loginSubmit"
                    placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                <el-input v-model="loginForm.password" 
                    type="password" 
                    clearable 
                    autocomplete="off" 
                    @keypress.enter.native="loginSubmit"
                    placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="验证码" :label-width="formLabelWidth" prop="code">
                <el-col :span="11">
                    <el-input 
                        v-model="loginForm.code" 
                        autocomplete="off" 
                        @keypress.enter.native="loginSubmit"
                        placeholder="请输入验证码"></el-input>
                </el-col>
                <el-col :span="11" style="height: 40px;">
                    <img class="captcha-image" :src="captchaUrl" @click="changeImg">
                </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="loginShow = false">取 消</el-button>
                <el-button type="primary" @click="loginSubmit">登 录</el-button>
            </div>
        </el-dialog>

        <el-dialog title="公告维护" width="800px" :visible.sync="boardMsgDialogShow">
          <el-form>
            <el-input type="textarea" rows="20" v-model="boardMsg" 
                clearable 
                placeholder="请输入公告内容"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="boardMsgDialogShow = false">取 消</el-button>
              <el-button type="primary" @click="saveBoardMsg">保 存</el-button>
          </div>
        </el-dialog>

        <el-dialog title="修改密码" width="500px" :visible.sync="changePwdShow">
            <el-form :model="changePwdForm" ref="changePwdForm" :rules="changePwdRules">
                <el-form-item label="当前密码" :label-width="formLabelWidth" prop="password">
                  <el-input v-model="changePwdForm.password" 
                      type="password" 
                      clearable 
                      autocomplete="off" 
                      @keypress.enter.native="changePwdSubmit"
                      placeholder="请输入当前密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPassword">
                  <el-input v-model="changePwdForm.newPassword" 
                      type="password" 
                      clearable 
                      autocomplete="off" 
                      @keypress.enter.native="changePwdSubmit"
                      placeholder="请输入新密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" 
                  :label-width="formLabelWidth" prop="confirmPassword">
                  <el-input v-model="changePwdForm.confirmPassword" 
                      type="password" 
                      clearable 
                      autocomplete="off" 
                      @keypress.enter.native="changePwdSubmit"
                      placeholder="请输入确认密码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="changePwdShow = false">取 消</el-button>
                <el-button type="primary" @click="changePwdSubmit">保 存</el-button>
            </div>
        </el-dialog>

      <el-dialog title="体验服帐号注册" width="500px" :visible.sync="regFormShow">
          <el-form :model="regForm" ref="regForm" :rules="regFormRules">
              <el-form-item label="账号" :label-width="formLabelWidth" prop="username">
                <el-input v-model="regForm.username" 
                    type="text" 
                    clearable 
                    autocomplete="off" 
                    @keypress.enter.native="regSubmit"
                    placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                <el-input v-model="regForm.password" 
                    type="password" 
                    clearable 
                    autocomplete="off" 
                    @keypress.enter.native="regSubmit"
                    placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" 
                :label-width="formLabelWidth" prop="confirmPassword">
                <el-input v-model="regForm.confirmPassword" 
                    type="password" 
                    clearable 
                    autocomplete="off" 
                    @keypress.enter.native="regSubmit"
                    placeholder="请输入确认密码"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                <el-input v-model="regForm.email" 
                    type="text" 
                    clearable 
                    autocomplete="off" 
                    @keypress.enter.native="regSubmit"
                    placeholder="请输入用于找回密码的邮箱"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="regFormShow = false">取 消</el-button>
              <el-button type="primary" @click="regSubmit">注 册</el-button>
          </div>
      </el-dialog>
    </el-container>
</template>

<script>
import { login, getBoardMsg, setBoardMsg, adminChangePwd, regAcc } from "../service/api";
import axios from "axios";
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      loginShow: false,
      loginForm: {
        username: '',//"pizi",
        password: '',//"dkpmaster001",
        code: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 4, max: 4, message: "长度为4个字符", trigger: "blur" }
        ]
      },
      boardMsgDialogShow: false,
      boardMsg: '',
      formLabelWidth: "100px",
      captchaUrl: "",
      changePwdShow: false,
      changePwdForm: {
        password: '',
        newPassword: '',
        confirmPassword: ''
      },
      changePwdRules: {
        password: [{required: true, message: "请输入当前密码", trigger: "blur"}],
        newPassword: [{required: true, message: "请输入新密码", trigger: "blur"}],
        confirmPassword: [
          {required: true, message: "请输入确认密码", trigger: "blur"},
          {
            validator: (rule, value, callback) => {
              if(value != this.changePwdForm.newPassword){
                callback(new Error('两次输入密码不一致!'));
              }else{
                callback();
              }
            }
          }
        ]
      },
      regFormShow: false,
      regForm: {
        username: '',
        password: '',
        email: '',
        confirmPassword: ''
      },
      regFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "change" },
          { min: 5, max: 16, message: "用户名长度为5-16位", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              if(/^[a-zA-Z]\w*$/.test(value)){
                callback();
              }else{
                callback(new Error('用户名不符合规则，必须以英文字母开头'));
              }
            },
            trigger: "change"
          }
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "change"},
          { min: 6, max: 16, message: "密码长度为6-16位", trigger: "change" },
        ],
        confirmPassword: [
          {required: true, message: "请输入确认密码", trigger: "change"},
          {
            validator: (rule, value, callback) => {
              if(value != this.regForm.password){
                callback(new Error('两次输入密码不一致!'));
              }else{
                callback();
              }
            }, 
            trigger: "change"
          }
        ],
        email: [
          {required: true, message: "请输入邮箱", trigger: "change"},
          {
            validator: (rule, value, callback) => {
              if(/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(value)){
                callback();
              }else{
                callback(new Error('邮箱格式不正确!'));
              }
            }, 
            trigger: "change"
          }
        ]
      }
    };
  },
  computed: {
    ...mapGetters(['isLogin', 'level'])
  },
  methods: {
    ...mapMutations(["login", "logout"]),
    menuItemSelect(index, indexPath) {
      if (isNaN(index)) {
        this.$router.push({ name: index });
        return;
      } else if(index == 3) {
        this.$nextTick(_ => {
          this.loginReset();
        });
        this.loginShow = true;
      } else if(index == 4) {
        this.$confirm("确定要退出登录吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.logout();
          this.$message({
            type: "success",
            message: "已退出登录状态"
          });
        });
      } else if(index == 5) {
        getBoardMsg().then(({data})=>{
          this.boardMsg = data.data.boardMsg
          this.boardMsgDialogShow = true;
        })
      } else if(index == 6) {
        this.changePwdShow = true;
      } else if(index == 7) {
        this.regFormShow = true;
        this.$nextTick(_=>{
          this.$refs["regForm"].resetFields();
        })
      }
    },
    changeImg() {
      this.captchaUrl = `/api/manage/loginCaptcha?${Math.random()}`;
    },
    loginSubmit() {
      this.$refs["loginForm"].validate(valid => {
        if (valid) {
          login(this.loginForm).then(
            ({ data }) => {
              this.login({user:data.data});
              this.loginShow = false;
            },
            err => {
              this.changeImg();
            }
          );
        }
      });
    },
    loginReset() {
      this.changeImg();
      this.$refs["loginForm"].resetFields();
    },
    saveBoardMsg() {
      let boardMsg = this.boardMsg;
      if(boardMsg.length==0){
        this.$alert('请输入公告内容');
      }else{
        setBoardMsg({boardMsg}).then(({data})=>{
          this.$message({
            type: 'success',
            message: '公告设置成功'
          })
          this.boardMsgDialogShow = false;
        })
      }
    },
    changePwdReset() {
      this.$refs["changePwdForm"].resetFields();
    },
    changePwdSubmit() {
      this.$refs["changePwdForm"].validate(valid => {
        if (valid) {
          adminChangePwd(this.changePwdForm).then(
            ({ data }) => {
              this.changePwdShow = false;
              this.changePwdReset();
            },
            err => {
              this.changePwdReset();
            }
          );
        }
      });
    },
    regSubmit() {
      this.$refs["regForm"].validate(valid => {
        if (valid) {
          regAcc(this.regForm).then(_ => {
            this.$message({
              type: 'success',
              message: '注册成功'
            })
          })
          this.regFormShow = false;
        }
      })
    }
  },
  created() {
    this.changeImg();
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  // width: 100vw;
  // height: 100%;
  // box-sizing: border-box;
  min-width: 1500px;
  min-height: 100vh;
}
.captcha-image {
  height: 40px;
  cursor: pointer;
}
.banner {
  background: url("../assets/image/feather.jpg") no-repeat left center;
  background-size: 200px 100%;
  background-color: #feddb8;
  line-height: 100px;
  font-size: 20px;
  padding: 0;
  color: #e63b3b;
  text-align: center;
}
</style>
